import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Image } from 'components/atoms';
import {
  colors,
  FormControl,
  OutlinedInput,
  InputAdornment,
  Button,
  Typography,

} from '@material-ui/core';
import { Icon } from 'components/atoms';
import Banner from '../Banner';
import { useDispatch, useSelector } from 'react-redux'

import { callGetNewsApi } from 'utils/networking';


const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    height: '100%',
    position: 'relative',
    minHeight: 400,
    backgroundSize: 'cover',
    background: '#000',
  },
  image: {
    minHeight: 400,
    maxHeight: 600,
  },
  searchBox: {
    padding: "20px",
    background: '#000',
  },
  searchInputContainer: {
    background: theme.palette.background.paper,
    padding: theme.spacing(2),
    boxShadow: '0 4px 14px 0 rgba(0, 0, 0, 0.11)',
    borderRadius: theme.spacing(1),
    width: '100%',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    '& .MuiOutlinedInput-notchedOutline': {
      border: '0 !important',
    },
    '& .MuiInputAdornment-positionStart': {
      marginRight: theme.spacing(2),
    },
    '& .MuiOutlinedInput-adornedStart': {
      paddingLeft: 0,
    },
    '& .MuiOutlinedInput-input': {
      padding: 0,
    },
    [theme.breakpoints.down('sm')]: {
      padding: theme.spacing(1),
    },
  },
  searchButton: {
    maxHeight: 45,
    minWidth: 135,
    [theme.breakpoints.down('sm')]: {
      minWidth: 'auto',
    },
  },
  title: {
    textAlign: "center",
    color: 'white',
    fontWeight: "bold"
  }
}));

const Hero = props => {

  const { data, className, searchBlogs, setSearchKey, ...rest } = props;
  const classes = useStyles();
  const theme = useTheme();

  const dispatch = useDispatch()
  const [cover, setCover] = useState("")

  useEffect(() => {
    getServerSideProps();
  }, [])

  const getServerSideProps = async () => {
    callGetNewsApi('cover/covers_and_reviews', dispatch, (data) => {
      setCover(data.live)
    });
  }
  return (
    <div className={clsx(classes.root, className)} {...rest}>
      {/* <Image
        src={cover.image ? cover.image : "https://assets.maccarianagency.com/the-front/photos/rental/hero-bg-image.jpg"}
        srcSet={cover.image ? cover.image : "https://assets.maccarianagency.com/the-front/photos/rental/hero-bg-image@2x.jpg 2x"}
        alt="..."
        className={classes.image}
        lazyProps={{
          width: '100%',
          height: '100%',
        }}
      /> */}
      <Banner />
      <div className={classes.searchBox}>
        <div className={classes.searchInputContainer}>
          <FormControl fullWidth variant="outlined">
            <OutlinedInput
              size="large"
              onChange={event => setSearchKey(event.target.value)}
              startAdornment={
                <InputAdornment position="start">
                  <Icon
                    fontIconClass="fas fa-search"
                    fontIconColor={theme.palette.primary.dark}
                  />
                </InputAdornment>
              }
              placeholder="Search by name"
            />
          </FormControl>
          <Button
            color="primary"
            variant="contained"
            size="large"
            className={classes.searchButton}
            onClick={searchBlogs}
          >
            Search
          </Button>
        </div>
      </div>

      <Typography variant='h3' className={classes.title}>{cover.title ? cover.title : "Live Feed"}</Typography>
    </div>
  );
};

Hero.propTypes = {
  /**
   * External classes
   */
  className: PropTypes.string,
};

export default Hero;
